<template>
  <div>
 <div>
     <van-nav-bar fixed>
        <template #left>
          <!-- <img src="../../assets/toutiao_logo.png" alt="logo" class="logo" /> -->
          <!-- <img :src="imgObj" alt="logo" class="logo" /> -->

         <strong>用户:</strong>{{phone}}
        <div class="abc">
           <img v-lazy="imgg" alt="">
        </div>

        </template>
        <template #right>
          <van-icon name="search" color="white" size="18" />
        </template>
      </van-nav-bar>
 </div>
 <div>

     <van-tabs v-model="active"  sticky offset-top="1.22667rem">
  <van-tab :title="obj.name" v-for="obj in navlist" :key="obj.id">

<Main :id='obj.id'></Main>

  </van-tab>

</van-tabs>

 </div>
  </div>
</template>

<script>
import Main from './components/main'
import { channelAPI } from '../../api/index'
import imgObj from '../../assets/toutiao_logo.png'
// import '../../store/index'
import { mapState } from 'vuex'
// import { getStorage } from '../../utils/storeg'
// import { getStorage } from '../../utils/storeg'

export default {
  computed: {
    ...mapState('user', ['phone']),
    ...mapState('user', ['imgg'])
  },

  components: {
    Main
  },
  async created () {
    const [, res] = await channelAPI()

    this.navlist = res.data.data.channels
  },
  data () {
    return {
      active: 0,
      imgObj,
      navlist: []

    }
  }
}
</script>

<style scoped lang="less">

.abc img{
  border-radius: 15em;
width: 50px;

}
/deep/ .van-nav-bar__content{
    background: blue;
}
/deep/ .van-tabs{
    margin-top: 46px;
}

.logo {
  height: 80%;
}
</style>
